#{extends 'main.html' /}
#{set title:'CoolSoft' /}
%{sessionUser=session.get("userId");}%
<head>
   

    #{secure.check 'Master Board'}
    
    <script>
        
        function master(){
        
            $('.editTDS').editable(function(value, settings){
                $.post('@{Tasks.editTaskDescription()}', {
                    taskId: $(this).parent().attr('id'),
                    newDiscription: value
                }, function(error){
                    if (error[0] == false) {
                        showDialogHelper('Invalid', "Invalid input", false, null, 'error');
                    }
                }, "json");
                return (value);
                
            }, {
                tooltip: 'Click to edit..'
            });
            
            $('.editTPS').editable(function(value, settings){
                $.post('@{Tasks.editPriority()}', {
                    priority: $(this).find('select option:selected').text(),
                    taskId: $(this).parent().attr('id')
                });
                return ($(this).find('select option:selected').text());
                
            }, {
                loadurl: '@{Tasks.getPrioritiesJSON()}',
                type: 'select',
                tooltip: 'Click to edit.',
                submit: 'OK'
            });
            
            
        }
        
    </script>
    #{/secure.check}
    <style>
        li {
            display: inline;
            list-style-type: none;
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <h2>Board Of <a href="@{Events.showSprint(event.getEntityId())}">${event.name}</a></h2>
	
	
    <div align="center">
        <Table>
            <tr>
                <td>
                    <div class="tableMenu snapshot-exclude">
                        <h3>Click to hide and show</h3>
                        <ul id = "list">
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="clear:left;">
                    </div>
                    <div style="overflow:scroll; left:0px; margin-left:0%; top:100px; width:100%">
                        <div id="ref" bgcolor="#000000">
                        	 <link rel="stylesheet" href="/public/stylesheets/tipTip.css" />
    <script type="text/javascript" src="/public/javascripts/base64encode.js">
    </script>
    <script type="text/javascript" src="/public/javascripts/snapshot.js">
    </script>
    <script src="/public/javascripts/jquery.columnmanager.min.js">
    </script>
    <script src="/public/javascripts/jquery.columnmanager.pack.js">
    </script>
    <script src="/public/javascripts/jquery.jeditable.js">
    </script>
    <script src="/public/javascripts/jquery.tipTip.minified.js">
    </script>
    <script type="text/javascript">
        
        $(document).ready(function(){
            //for (var v=0;v<=columns.size();v=v+1){
            // $("#rcolumn").hide();
            $('.rcolumn').hide();
            $("#snap").hide();
            $("#ncolumn").hide();
            $("#new_column").colorbox({
                width: "17%",
                inline: true,
                href: "#ncolumn",
                onOpen: function(){
                    $("#ncolumn").show();
                },
                onCleanup: function(){
                    $("#ncolumn").hide();
                },
            });
            $('.rename_column').colorbox({
                width: "30%",
                inline: true,
                href: "#rcolumn",
                onOpen: function(){
                    $("#rcolumn").show();
                },
                onCleanup: function(){
                    $("#rcolumn").hide();
                },
            });
            $("#take_snapshot").colorbox({
                width: "20%",
                inline: true,
                href: "#snap",
                onOpen: function(){
                    $("#snap").show();
                    snapshot();
                },
                onCleanup: function(){
                    $("#snap").hide();
                },
            });
        });
        
        // resposible for reflect column changes on DB
        
        
        function renameprompt(v){
            document.getElementById('columnId').value = v;
            
        }
        
        function showdialog(path, width, height){
            var url = document.getElementById(path).value;
            window.open(url, "", "width=" + width + ",height=" + height + "\"");
        }
        
        function showdialog2(path, width, height){
        
            window.open(path, "", "width=" + width + ",height=" + height + "\"");
        }
    </script>
	
    <script type="text/javascript">
        
        $(function(){
        
            //allow showing and hiding columns
            $('#board').columnManager({
                listTargetID: 'list'
            });
            
            // allow drag and drop of stories to sort them
            $("#story").sortable();
            
            // allow drag and drop of tasks and change their statuses
            $("td.taskss").sortable({
                connectWith: 'td',
                receive: function(event, ui){
                    var item = $(ui.item).attr('id');
                    var newstatus = $(this).attr('id');
                    if (($(ui.sender).attr('class')) != ($(this).attr('class'))) {
                        $(ui.sender).append(ui.item);
                    }
                    else {
                        $.post('@{Tasks.changeTaskStatus()}', {
                            taskId: item,
                            newStatusId: newstatus
                        }, function(error){
                            if (error[0] == false) {
                                //alert("lol");
                                showDialogHelper('Invalid', "You are not allowed to do this move", false, null, 'error');
                                ui.sender.append(ui.item);
                            }
                        }, "json");
                    }
                }
            }, "refreshPositions");
            $("table").disableSelection();
            //take attendance
            $('div.attendant:> a').click(function(){
                $(this).parent().slideToggle('fast');
            });
            // show and hide more info
            $('div.show:> div').hide();
            $('div.show:> label').click(function(){
                $(this).next().slideToggle('fast');
            });
            
            
            
            
            $('.editTask${sessionUser}').editable(function(value, settings){
                $.post('@{Tasks.editTaskDescription()}', {
                    taskId: $(this).parent().attr('id'),
                    newDiscription: value
                });
                return (value);
                
            }, {
                tooltip: 'Click to edit..'
            });
            $('.editTaskPrio${sessionUser}').editable(function(value, settings){
                $.post('@{Tasks.editPriority()}', {
                    priority: $(this).find('select option:selected').text(),
                    taskId: $(this).parent().attr('id')
                });
                return ($(this).find('select option:selected').text());
                
            }, {
                loadurl: '@{Tasks.getPrioritiesJSON()}',
                type: 'select',
                tooltip: 'Click to edit.',
                submit: 'OK'
            });
            //TODO only for
            master();
            
        });
    </script>
                            <table id="board" width="auto" border = "7" style=" top: 100px; " class="draggable sortable">
                                <tr style="position:static;">
                                    <th width="auto" align="center">
                                        <h3>STORIES</h3>
                                    </th>
                                    #{list items:columns, as:'column'}
                                    <th id="i" onmouseup="changef();">
                                        <h3>${column.name}</h3>
                                    </th>
                                    #{/list}
                                </tr>
                                #{secure.check 'Master Board'}
                                <tr style="position:static;overflow:hidden;">
                                    <td width="auto" align="center">
                                    </td>
                                    #{list items:columns, as:'column'}
                                    <td>
                                        <div class="snapshot-exclude">
                                            <center>
                                                <a class ="deleteLink" href="javascript:showDialogHelper('Confirmation','Are you sure you want to delete this column?',true,'@{deleteColumn(event.getEntityId(),type,column.id)}','prompt');" title="delete?" style="color:red;font-weight:bold">X</a>
                                                <a title="rename" id="rename_column" name="${column.id}" class="rename_column" href="#" onclick="renameprompt('${column.id}')"><img src="/public/images/pencilgrey.bmp" border=0></a>
                                                <script>
                                                    $(function(){
                                                        $(".rename_column").tipTip();
                                                        $(".deleteLink").tipTip();
                                                    });
                                                </script>
                                                <div id="rcolumn" class="rcolumn" style ="overflow:hidden">
                                                    #{form @Board.renameColumn(event.getEntityId(),type,null)}
                                                    Enter New Name:<input type="hidden" value="${column.id}" id="columnId" name="columnId">
                                                    <br>
                                                    <br>
                                                    <input type="text" name="newName" id="newName" value=""><input type="submit" value="Rename" id="submitb">#{/form}
                                                </div>
                                            </center>
                                        </div>
                                    </td>#{/list}
                                </tr>#{/secure.check}
                                #{list items:allTasks , as:'row'}
                                <tr>
                                    <td>
                                        
                                        	#{if !stories.isEmpty()}
                                          %{Story=stories.remove(0);
										  cl=Story.getEntityId();
										  }%
                                        
                                                <div class="show" style="overflow:hidden;height:auto;background:#ffffd5;outline:solid 1px black;width:100px;">
                                                    <label style="color:black;font-size:15px;padding:2px 2px 2px 2px;width:auto;">
                                                        <b>ID:</b>${Story.component.name}.${Story.getEntityId()} <b>Comp:</b>${Story.component.name}
                                                    </label>
                                                    <div id="${Story.getEntityId()}" style="background:#FBB117; outline:solid 1px black; height:auto;width:auto;">
                                                        Story: 
                                                        <label class="editStory${(Story.creator).getEntityId()}">
                                                            ${Story.story}
                                                        </label>
                                                        <br>
                                                        Pri.: 
                                                        <label class="editprio">
                                                            ${Story.priority}.
                                                        </label>
                                                        <br>
                                                        Eff.:
                                                        <label class="editEffort">
                                                            ${Story.effortEstimation}
                                                        </label>
                                                        <br>
                                                        <b>Status:</b>
                                                        ${Story.status} 
                                                        <br>
                                                        <b>Creator:</b>
                                                        #{if Story.creator}
                                                        ${Story.creator.firstName} ${Story.creator.lastName}
                                                        #{/if}
                                                    </div>
                                                    <label style="color:black;font-size:9px;padding:2px 2px 2px 2px;width:80px;">
                                                    </label>
                                                </div>
                                        
											#{/if}
                                          
                                        
                                    </td>
                                    %{
                                    i=0;
                                    }%
                                    #{list items:row, as:'tasklist'}
									
                                   %{ids=columns.get(i).status.getEntityId();
                                    i++;
                                    }%
                                    <td id="${ids}" class="taskss ${cl}">
                                        #{list items:tasklist ,as: 'no'}
                                        <div class="show" id="${no.getEntityId()}" style="height:auto;width:90px;background:#e1f0ff;outline:solid 1px black;">
                                            <label style="color:black;font-size:13px;width:80px;">
                                                <b>ID:</b>${no.getEntityId()} 
                                            </label>
                                            <div id="${no.getEntityId()}" style="font-size:13px;overflow:hidden;background:#e1ffff;outline:solid 1px black;width:auto; ">
                                                <b>Type:</b>
                                                <label>
                                                    ${no.type.type}
                                                </label>
                                                <br>
                                                <b>Task:</b>
                                                %{v=-1;}%
												%{user=no.getTaskAssignee()}%
                                                #{if user}
                                                %{v=user.getEntityId();}%
                                                #{/if}
                                                %{ stat="";
                                                if(no.status.equals("CLOSED"))
                                                stat="close";
                                                }%
                                                <label class="editTask${v}${stat} editTDS">
                                                    ${no.description}
                                                </label>
                                                <br>
                                                <b>Pri: </b>
                                                <label class="editTaskPrio${v}${stat} editTPS">
                                                    ${no.priority}
                                                </label>
                                                <br>
                                                <b>Eff.:</b>
                                                <label>
                                                    ${no.initialEffortEstimation}
                                                </label>
                                                <br>
                                                <b>Assign:</b>
                                                <label>
                                                    #{if user}
													
                                                    ${user.firstName} ${user.lastName}
                                                    #{/if}
                                                    #{else}
                                                    NON
                                                    #{/else}
                                                </label>
                                                <br>
                                                <b>Story ID:</b>
                                                #{if no.userStory}
                                               	${no.userStory.getEntityId()}
                                                #{/if}
                                                #{else}
                                                NoN
                                                #{/else}
                                                <br>
                                            </div>
                                            <label style="color:black;font-size:9px;padding:2px 2px 2px 2px;width:80px;">
                                                <a href="@{Tasks.showTask(no.getEntityId())}">All info</a>
                                            </label>
                                        </div>
                                        <br>
                                        #{/list}
                                    </td>
                                    #{/list} 
                                </tr>
                                #{/list}
                            </table>
                        </div>
                        </td>
                    </tr>
                    </table>
                </div>
                <div style="clear:both;">
                <td><a href="@{SprintBacklog.viewSprintBacklog(event.project.getEntityId(),event.getEntityId())}">View Sprint Backlog</td><br>
                </div>
                <br>
                <br>
                <br>
                <table>
                    <th>
                        <b>Snapshots</b>
                    </th>
                    <th>
                    </th>
                    <th>
                        <b></b>
                    </th>
                    <th>
                        #{if currentMeeting}<b>Absent</b>
                        #{/if}
                    </th>
                    <th>
                        <b></b>
                    </th>
                    <th>
                        #{if currentMeeting}<b>Users Attending <br> ${currentMeeting.name}</b>
                        #{/if}
                    </th>
                    <tr>
                        <td>
                            <div class="snapshot-exclude">
                                <a id="take_snapshot"href="#">Take Snapshot</a>
                                <br>
                                #{secure.check 'Master Board'}
                                #{if statusNottaken.size() != 0}<a id="new_column"href="#">New Column</a>
                                #{/if}
                                #{/secure.check}
                            </div>
                            <div id="snap" class="snapshot-exclude">
                                #{form @Board.snap(event.getEntityId(),type)}<input name="url" id="url" type="hidden" value="">Enter Snapshot Name:
                                <br>
                                <br>
                                <input class="validate[required,custom[onlyLetter],length[1,50]]"  name="name" id="name" type="text" value=""><input type="submit" value="Take Snapshot" id="submitb">#{/form}
                            </div>
                            <br>
                            <br>
                        </td>
                        <td>
                            <div id="ncolumn">
                                #{if statusNottaken.size() != 0}
                                <table border="2" class="snapshot-exclude">
                                    <h3>New Column Form: </h3>
                                    #{form @Board.newColumn(boardId,event.getEntityId(),type)}
                                    Column Name:
                                    (if not entered status name is taken)
                                    <br>
                                    <input type="text" name="name" id="name">
                                    <br>
                                    Column Status:
                                    <br>
                                    <select id="status" name="status">
                                        #{list items:statusNottaken, as:'status'}<option value="${status.id}">${status.status}</option>#{/list}
                                    </select>
                                    <br>
                                    <input type="submit" value="Submit Form" id="submitb">#{/form}
                                </table>#{/if}
                            </div>
                        </td>
                        <td width=100px>
                        </td>
                        <td title="list of assigned but absent users">
                            <div>
                                #{list items:absent ,as:'user'}
                                <div class="attendant" style="color: #333366 height: 50 px; width: 300 px;">
                                    <img src="${user.image}" alt="noImage" width="40" height="50" align=middle alt="noImage" />
                                    <label id="${user.getEntityId()}">
                                        ${user.firstName} ${user.lastName}
                                        <br>
                                    </label>
                                    #{if (Long).parseLong(session.get("userId"))==user.getEntityId()}<a href="@{Events.markAttendant(user.getEntityId(),currentMeeting.getEntityId(),type,-1)}">attend</a>
                                    #{/if}
                                </div>
                                <br>
                                #{/list}
                            </div>
                        </td>
                        <td width=100px>
                        </td>
                        <td title="list of users currently attending">
                            <div>
                                #{list items:attending ,as:'user'}
                                <div style="color: #333366 height: 50 px; width: 300 px;">
                                    <img src="${user.image}" alt="noImage" width="40" height="50" align=middle alt="noImage" /><input type="radio" name="attendants" value="${user.getEntityId()}">${user.firstName} ${user.lastName}
                                    <br>
                                </div>
                                <br>
                                #{/list}
                            </div>
                        </td>
                    </tr>
                </table>
                </body>
